<template>
  <m-calendar
      :events="events"
      @date-click="dateClick"
      :eventContent="eventContent"
      locale="zh-cn"
      :displayEventEnd="true"
  ></m-calendar>
</template>

<script setup lang="ts">
import {EventItem} from "../../components/calendar/src/types.ts";
import {DateClickArg} from "@fullcalendar/interaction";
import {EventContentArg } from "@fullcalendar/core";
import {ref} from "vue";

let events = ref<EventItem[]>([
  {
    title: '购物',
    start: '2024-08-05 10:00:00',
    end: '2024-08-05 12:00:00',
    editable: true
  },
  {
    title: '学习',
    start: '2024-08-06 08:00:00',
    end: '2024-08-06 16:00:00'
  }
])

let dateClick = (info: DateClickArg) => {
  let event = {
    start: `${info.dateStr} 12:00:00`,
    end: `${info.dateStr} 13:00:00`,
    title: '吃饭'
  }
  events.value.push(event)
  console.log(info)
}

let eventContent = (arg: EventContentArg) => {
  let el = document.createElement('div')
  let timeTextArr = arg.timeText.split(' - ')
  let start = timeTextArr[0].replace('上午', '').replace('下午', '').replace('时', '')
  let end = timeTextArr[1].replace('上午', '').replace('下午', '').replace('时', '')
  el.innerHTML = `
        <img src="src/assets/vue.svg" style="width:20px;height:20px;">
         <div style="color: red">开始时间: ${start}</div>
         <div style="color: red">结束时间: ${end}</div>
         <div>标题: ${arg.event._def.title}</div>
        `
  return {
    domNodes: [el]
  }
}

</script>

<style lang="scss" scoped>

</style>
